<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../css/头部.css">
    <link rel="stylesheet" href="../css/首页.css">
    <link rel="stylesheet" href="../css/底部.css">

    <script src="../js/utils/mock-min.js"></script>
    <script src="../js/utils/jquery.min.js"></script>
    <script src="../js/utils/qzdl.js"></script>

    <script src="../js/components/首页前端.js"></script>
    <script src="../js/API/首页后端.js"></script>

    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.swiper-contione {
				width: 100%;
				height: 947px;
				overflow: hidden;
				position: relative;
			}

			.swiper {
				width: 9999999px;
				height: 947px;
				transition: all 1s ease;
			}

			.swiper-item {
				width: 1920px;
				height: 947px;
				float: left;
				position: relative;
			}

			.swiper-item img {
				width: 100%;
				height: 947px;
			}


			.swiper-point {
				width: 100%;
				height: 40px;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}

			.point {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.9);
				margin-right: 5px;
				float: left;
			}

			.point.active {
				background: #fff;
			}

			.swiper-left {
				width: 60px;
				height: 100%;
				position: absolute;
				top: 0;
				left: -60px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.4s ease;
			}

			.swiper-right {
				width: 60px;
				height: 100%;
				position: absolute;
				top: 0;
				right: -60px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.4s ease;
			}

			.swiper-left img,
			.swiper-right img {
				cursor: pointer;
			}

			.swiper-contione:hover .swiper-left {
				left: 0;
			}

			.swiper-contione:hover .swiper-right {
				right: 0;
			}
		</style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="toubu">
            <div class="logo">
                <img src="../img/logo.webp" alt="">
            </div>
            <div class="biaoti">
                <ul>
                    <li><a href="../html/首页.html"><span>首页</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/关于.html"><span>关于</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/茶叶.html"><span>茶叶</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/基地.html"><span>基地</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/新闻.html"><span>新闻</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/联系.html"><span>联系</span></a>
                        <div class="xian"></div>
                    </li>
                </ul>
            </div>
            <div class="tubiao">
                <div class="tubiao2">
                    <div class="tubiao3">
                        <div class="tubiao4"><img src="../img/搜索.png" alt=""></div>
                        <div class="tubiao4"><img src="../img/用户.png" alt=""></div>
                        <div class="tubiao4" onclick="gwc()"><img src="../img/购物车.png" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </header>


    
    <!-- 大图片 -->
    <div class="swiper-contione">
        <div class="swiper">
            <div class="swiper-item">
                <img src="../img/茶大图.webp">
            </div>
            <div class="swiper-item">
                <img src="../img/首页.webp">
            </div>
        </div>
        <div class="swiper-point">
            <div class="swiper-point-item">
                <div class="point active"></div>
                <div class="point"></div>
            </div>
        </div>
    </div>
    <!-- 新茶上市 -->
    <div class="TeaLeave">
        <div class="TeaLeave2">
            <div class="TeaLeave3">新茶上市</div>
            <div class="TeaLeave4">Tea Leave</div>
        </div>
    </div>
    <!-- 六个茶 -->
    <div class="SixTea" id="SixTea">
        <!-- <div class="SixTea1">
            <div class="SixTea1img"><img src="../img/茉莉花茶.webp" alt=""></div>
            <div class="SixTea1title1">茉莉花茶</div>
            <div class="SixTea1title11"></div>
            <div class="SixTea1title2">￥223.0</div>
        </div>
        <div class="SixTea1">
            <div class="SixTea1img">
                <img src="../img/白牡丹.webp" alt="">
            </div>
            <div class="SixTea1title1">白牡丹</div>
            <div class="SixTea1title11"></div>
            <div class="SixTea1title2">￥1,235.0</div>
        </div>
        <div class="SixTea1">
            <div class="SixTea1img">
                <img src="../img/白毫银针.webp" alt="">
            </div>
            <div class="SixTea1title1">白毫银针</div>
            <div class="SixTea1title11"></div>
            <div class="SixTea1title2">￥258.0</div>
        </div>
        <div class="SixTea1">
            <div class="SixTea1img">
                <img src="../img/云南普洱茶.webp" alt="">
            </div>
            <div class="SixTea1title1">云南普洱茶</div>
            <div class="SixTea1title11"></div>
            <div class="SixTea1title2">￥500.0</div>
        </div>
        <div class="SixTea1">
            <div class="SixTea1img">
                <img src="../img/湖北老青茶.webp" alt="">
            </div>
            <div class="SixTea1title1">湖北老青茶</div>
            <div class="SixTea1title11"></div>
            <div class="SixTea1title2">￥400.0</div>
        </div>
        <div class="SixTea1">
            <div class="SixTea1img">
                <img src="../img/霍山黄芽蒙洱银针.webp" alt="">
            </div>
            <div class="SixTea1title1">霍山黄芽蒙洱银针</div>
            <div class="SixTea1title11"></div>
            <div class="SixTea1title2">￥711.0</div>
        </div> -->
    </div>

    <!-- 右箭头 -->
    <div class="youjiantou">
        <img src="../img/右箭头,指向右箭头.png" alt="">
    </div>

    <!-- 车 图 -->
    <div class="lvtuche">
        <!-- 中部div -->
        <div class="suspensiondiv">
            <!-- 俩行字 -->
            <div class="aboutus">
                <p>关于我们</p>
                <p>About</p>
            </div>
            <div class="imgtitlebutton">
                <div class="biluochun">
                    <img src="../img/碧螺春.webp" alt="">
                </div>
                <div class="imgtitlebutton-right">
                    <div class="imgtitlebutton-right-title">
                        <span>
                            茶叶源于中国，茶叶最早是被作为祭品使用的。但从春秋后期就被人们作为菜食，在西汉中期发展为药用，西汉后期才发展为宫廷高级饮料，普及民间作为普通饮料那是西晋以后的事。发现最早人工种植茶叶的遗迹在浙江余姚的田螺山遗址，已有6000多年的历史。饮茶始于中国。
                        </span>
                    </div>
                    <div class="imgtitlebutton-right-button">
                        了解更多
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 六个标 -->
    <div class="SixBiao">
        <div class="SixBiao1">
            <div class="SixBiao2"><img src="../img/SixBiao1.webp" alt=""></div>
            <div class="SixBiao2"><img src="../img/SixBiao2.webp" alt=""></div>
            <div class="SixBiao2"><img src="../img/SixBiao3.webp" alt=""></div>
            <div class="SixBiao2"><img src="../img/SixBiao4.webp" alt=""></div>
            <div class="SixBiao2"><img src="../img/SixBiao5.webp" alt=""></div>
            <div class="SixBiao2"><img src="../img/SixBiao6.webp" alt=""></div>
        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <!-- 底部左边 -->
        <div class="bottomdiv">
            <div class="lianxi">
                <p>联系</p>
                <span>Contact</span>
            </div>
            <div class="guanyu">
                <div class="guanyu1">
                    关于我们
                </div>
                <div class="guanyu2">
                    <img src="../img/微信.png" alt="">
                    <img src="../img/新浪微博.png" alt="">
                </div>
            </div>
            <div class="qifeiye">
                <div class="qifeiye1">
                    起飞页自助建站平台
                </div>
                <div class="qifeiye2">
                    <span>地址：苏州市建外SOHO东区2号楼</span>
                </div>
                <div class="qifeiye2">
                    <span>邮编：100000</span>
                </div>
                <div class="qifeiye2">
                    <span>电话：010-69557550</span>
                </div>
            </div>
        </div>

        <!-- 底部右边 -->
        <div class="bottomdiv-right">
            <div class="erweima">
                <img src="../img/二维码.png" alt="">
                <p>微博</p>
            </div>
            <div class="erweima">
                <img src="../img/二维码.png" alt="">
                <p>微信</p>
            </div>
        </div>

        <!-- 底部底部 -->
        <div class="COPYRIGHT">
            <div class="COPYRIGHTtitle">
                COPYRIGHT (©) 2019 茶叶类网站 京ICP备41414141414-1号
            </div>
        </div>
    </footer>
</body>
<script>
        //获取cookie
        let cookieStr = document.cookie;
    let cookirArr = cookieStr.split(";");
    let bool = false;
    let username;;
    for (let i = 0; i < cookirArr.length; i++) {
        //去除空格
        let str = cookirArr[i].trim();

        let key = "username=";
        if (str.startsWith(key)) {
            bool = true;
            username = str.substring(key.length, str.length);
            break;
        }
    }

    //判断bool标记值
    if (bool) {
    } else {
        location.href = "./登录注册.html"
    }
</script>
<script>
    function gwc(){
        location.href='../html/购物车.html'
    }
</script>
<script type="text/javascript">
    class Swiper {
        constructor() {
            this.w = $('.swiper-item').width();
            this.num = 0;
            this.len = $('.swiper .swiper-item').length - 1;
            this.timer = null;
        }
        init() {
            //设置定时器
            this.setTime();
            //滑上停止定时器
            this.hover();
            //点击指示
            this.pointClick();
            //点击左右箭头
            this.lrClick();
        }
        setTime() {
            this.timer = setInterval(() => {
                this.num++;	
                if (this.num > this.len) {
                    this.num = 0;
                }
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({transform: `translateX(${cssTrx}px)`})
            }, 3000)
        }
        hover() {
            $('.swiper-contione').hover(() => {
                clearInterval(this.timer)
            }, () => {
                this.setTime();
            });
        }
        pointClick() {
            let that = this;
            $('.swiper-point-item .point').click(function() {
                that.num = $(this).index();
                let cssTrx = -that.num * that.w;
                $(this).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            })
        }
        lrClick() {
            $('.swiper-left img').click(() => {
                this.num--;
                if (this.num < 0) {
                    this.num = this.len;
                };
                console.log(this.num)
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            });
            
            $('.swiper-right img').click(() => {
                this.num++;
                if (this.num > this.len) {
                    this.num = 0;
                }
                let cssTrx = -this.num * this.w;
                $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
                $('.swiper').css({
                    transform: `translateX(${cssTrx}px)`
                })
            })
        }
    }
    let sw = new Swiper();
    sw.init();
</script>
</html>